<template>
  <div
    class="template-container"
    v-loading="saveLoading"
  >
    <el-tabs
      v-model="activeName"
      @tab-click="handleClick"
    >
      <el-tab-pane
        label="基本信息"
        name="baseinfo"
      >
        <el-divider>基本信息</el-divider>

        <BaseForm
          ref="BaseForm"
          :data="treeNode"
          @selected="handleSelectedTable"
        />
      </el-tab-pane>
      <el-tab-pane
        label="包含字段"
        name="includefield"
        :disabled="!formData.tableName"
      >
        <FieldForm
          ref="FieldForm"
          :data="data"
        />
      </el-tab-pane>
    </el-tabs>
    <div class="footer">
      <el-button
        type="primary"
        @click="submitForm"
      >保存</el-button>
    </div>
  </div>
</template>
<script>
import BaseForm from './tempComponent/baseForm.vue'
import FieldForm from './tempComponent/fieldForm.vue'
import { saveTemplateInfo } from '@/api/import/template'
import { NODE_TYPE } from '../enum'
export default {
  props: {
    data: {
      type: Object,
      default: null
    }
  },
  components: { BaseForm, FieldForm },
  data() {
    return {
      activeName: 'baseinfo',
      formData: {
        tree: {
          parentId: '',
          nodeName: '',
          nodeType: NODE_TYPE.TEMPLATE
        },
        tableName: '',
        fields: []
      },
      saveLoading: false
    }
  },
  computed: {
    treeNode() {
      if (this.data.tree) {
        return { ...this.data.tree, tableName: this.data.tableName }
      } else {
        return {}
      }
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },
    handleSelectedTable(tableName) {
      this.formData.tableName = tableName
      if (this.data.tableName !== tableName) {
        this.$refs.FieldForm.refreshFields(tableName)
      }
      this.data.tableName = tableName
    },
    resetFormData() {
      this.formData = {
        tree: {
          parentId: '',
          nodeName: '',
          nodeType: NODE_TYPE.TEMPLATE
        },
        tableName: '',
        fields: []
      }
    },
    submitForm() {
      this.saveLoading = true
      const fieldData = this.$refs.FieldForm.getFieldData()
      const uniqueValid = this.$refs.FieldForm.getUniqueValidData()
      const formData = this.$refs.BaseForm.getFromData()

      this.formData.tree = formData
      this.formData.fields = fieldData
      this.formData.uniqueChecks = uniqueValid

      saveTemplateInfo(this.formData)
        .then((res) => {
          this.$message({
            type: 'success',
            message: '保存成功！'
          })
          this.$emit('save-success')
          this.saveLoading = false
        })
        .catch(() => {
          this.saveLoading = false
        })
    }
  },
  watch: {
    data: {
      handler(newVal, oldVal) {
        if (!newVal || newVal.id === oldVal.id) {
          return
        }
        this.activeName = 'baseinfo'
        this.resetFormData()
        this.formData = Object.assign(this.formData, newVal)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.template-container {
  height: 100%;
  position: relative;
  .el-tabs {
    height: 100%;
    ::v-deep .el-tabs__content {
      height: calc(100% - 40px - 15px);
    }
  }
  .el-tab-pane {
    height: calc(100% - 36px - 10px);
    overflow: hidden;
  }
  .footer {
    position: absolute;
    bottom: 0;
    right: 0;
  }
}
</style>